<template>
  <div class="product-list">
    <div class="products-grid">
      <div
        v-for="product in filteredProducts"
        :key="product.id"
        class="product-card"
      >
        <div class="product-image">
          <img :src="product.image" :alt="product.name" />
        </div>
        <div class="product-info">
          <h3 class="product-name">{{ product.name }}</h3>
          <div class="product-tags">
            <span class="product-tag" v-for="tag in product.tags" :key="tag">{{ tag }}</span>
          </div>
          <p class="product-price">¥{{ product.price }}</p>
          <button class="add-to-cart">加入购物车</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Product {
  id: number
  name: string
  price: number
  image: string
  categoryId: number
  tags: string[]
}

interface Props {
  categoryId: number
}

const props = defineProps<Props>()

// 模拟商品数据 - 更新为配件专区的数据
const products = ref<Product[]>([
  {
    id: 1,
    name: '旗舰智能手机',
    price: 5999,
    image: '/src/assets/vue.svg',
    categoryId: 1,
    tags: ['5G旗舰', '拍照']
  },
  {
    id: 2,
    name: '商务旗舰机',
    price: 6999,
    image: '/src/assets/vue.svg',
    categoryId: 1,
    tags: ['商务', '安全']
  },
  {
    id: 3,
    name: '5G游戏手机',
    price: 3999,
    image: '/src/assets/vue.svg',
    categoryId: 1,
    tags: ['游戏', '高刷']
  },
  {
    id: 4,
    name: '拍照神器',
    price: 4599,
    image: '/src/assets/vue.svg',
    categoryId: 1,
    tags: ['摄影', '徕卡']
  },
  {
    id: 5,
    name: '轻薄笔记本',
    price: 5999,
    image: '/src/assets/vue.svg',
    categoryId: 2,
    tags: ['轻薄', '办公']
  },
  {
    id: 6,
    name: '游戏本',
    price: 7999,
    image: '/src/assets/vue.svg',
    categoryId: 2,
    tags: ['游戏', '高性能']
  },
  {
    id: 7,
    name: '手机保护壳',
    price: 99,
    image: '/src/assets/vue.svg',
    categoryId: 3,
    tags: ['保护', '防摔']
  },
  {
    id: 8,
    name: '充电器',
    price: 199,
    image: '/src/assets/vue.svg',
    categoryId: 3,
    tags: ['快充', 'USB-C']
  }
])

// 根据分类ID过滤商品
const filteredProducts = computed(() => {
  return products.value.filter(product => product.categoryId === props.categoryId)
})
</script>

<style scoped>

.product-list {
  /* 移除可能存在的固定高度限制 */
  /* height: 600px; 如有此行请删除 */

  /* 可选：限制最大高度，超出时显示滚动条 */
  max-height: calc(100vh - 300px); /* 根据页面实际情况调整数值 */
  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */

  /* 添加底部留白，避免最后一个商品被遮挡 */
  padding-bottom: 40px;
}

.products-grid {
  display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    /* 可删除固定高度相关设置 */
}

.product-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.product-image {
  width: 100%;
  height: 160px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 20px;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.product-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.product-tag {
  padding: 4px 12px;
  background: #e8f5e8;
  color: #42b883;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.product-price {
  font-size: 24px;
  font-weight: bold;
  color: #ff4757;
  margin-bottom: 20px;
}

.add-to-cart {
  padding: 12px 24px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.3s ease;
  width: 100%;
}

.add-to-cart:hover {
  background: #40a9ff;
}
</style>